<template>
    <div class="pl-16px pt-16px pb-16px content-container">
        <div class="flex justify-between items-center user-info">
            <div class="flex items-center">
                <img src="" alt="">
                <div class="flex flex-col justify-center">
                    <p>皖仪科技</p>
                    <span>安徽皖仪科技股份有限公司</span>
                </div>
            </div>
            <div>
                <ul class="flex">
                    <li>
                        <p>5234</p>
                        <span>获赞</span>
                    </li>
                    <li>
                        <p>1207</p>
                        <span>评论</span>
                    </li>
                    <li>
                        <p>3.5w</p>
                        <span>粉丝</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="mt-16px mr-16px user-data">
            <el-row :gutter="10">
                <el-col :span="6">
                    <div class="flex justify-between items-center item d-1">
                        <div>
                            <p>8456</p>
                            <span>视频播放量</span>
                        </div>
                        <div class="icon-bg"></div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="flex justify-between items-center item d-2">
                        <div>
                            <p>8456</p>
                            <span>关键词排名</span>
                        </div>
                        <div class="icon-bg"></div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="flex justify-between items-center item d-3">
                        <div>
                            <p>8456</p>
                            <span>留言</span>
                        </div>
                        <div class="icon-bg"></div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="flex justify-between items-center item d-4">
                        <div>
                            <p>8456</p>
                            <span>意向客户</span>
                        </div>
                        <div class="icon-bg"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.user-info{
    img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 12px;
        & + div{
            text-align: left;
            p{
                font-size: 20px;
                font-weight: 700;
            }
            span{
                font-size: 14px;
                color: #999999;
                margin-top: 10px;
            }
        }
    }
    ul{
        li{
            text-align: center;
            padding: 0px 30px;
            position:relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            p{
                font-size: 20px;
                font-family: "DIN Web";
            }
            span{
                font-size: 12px;
                color: #999;
                margin-top: 10px;
            }
            &::after{
                content:'';
                width:1px;
                height:36px;
                position:absolute;
                right:0;
                top:50%;
                transform:translateY(-50%);
                background-color:var(--menuBorderColor);
            }
            &:last-child{
                &::after{
                    display: none;
                }
            }
        }
    }
    
}
.user-data{
    .item{
        border-radius: 2px 10px 2px 2px;
        height: 80px;
        padding: 0 20px;
        overflow: hidden;
        color: #fff;
        border-left:6px solid #fdd19d;
        background-image:-moz-linear-gradient(0deg,rgb(251,149,79) 0%, rgb(255,178,125) 100%);
        background-image:-webkit-linear-gradient(0deg,rgb(251,149,79) 0%, rgb(255,178,125) 100%);
        background-image:-ms-linear-gradient(0deg,rgb(251,149,79) 0%, rgb(255,178,125) 100%);
        p{
            font-size: 20px;
            font-family: "DIN Web";
        }
        span{
            font-size: 12px;
            margin-top: 10px;
            display: flex;
        }
        .icon-bg{
            width: 58px;
            height: 58px;
            background:url('@/assets/images/video-bg.png') no-repeat 0 0;
            background-size: contain;
        }
        &.d-2{
            border-color: #63b3fd;
            background-image:-moz-linear-gradient(0deg,rgb(56,154,245) 0%, rgb(113,186,255) 100%);
            background-image:-webkit-linear-gradient(0deg,rgb(56,154,245) 0%, rgb(113,186,255) 100%);
            background-image:-ms-linear-gradient(0deg,rgb(56,154,245) 0%, rgb(113,186,255) 100%);
            .icon-bg{
                width: 92px;
                height: 50px;
                background:url('@/assets/images/keyword-bg.png') no-repeat 0 0;
                background-size: contain;
            }
        }
        &.d-3{
            border-color: #ff9292;
            background-image:-moz-linear-gradient(0deg,rgb(255,110,110) 0%, rgb(255,129,129) 100%);
            background-image:-webkit-linear-gradient(0deg,rgb(255,110,110) 0%, rgb(255,129,129) 100%);
            background-image:-ms-linear-gradient(0deg,rgb(255,110,110) 0%, rgb(255,129,129) 100%);
            .icon-bg{
                width: 56px;
                height: 55px;
                background:url('@/assets/images/message-bg.png') no-repeat 0 0;
                background-size: contain;
            }
        }
        &.d-4{
            border-color: #78d498;
            background-image:-moz-linear-gradient(0deg,rgb(95,193,130) 0%, rgb(115,205,147) 100%);
            background-image:-webkit-linear-gradient(0deg,rgb(95,193,130) 0%, rgb(115,205,147) 100%);
            background-image:-ms-linear-gradient(0deg,rgb(95,193,130) 0%, rgb(115,205,147) 100%);
            .icon-bg{
                width: 61px;
                height: 56px;
                background:url('@/assets/images/angel-bg.png') no-repeat 0 0;
                background-size: contain;
            }
        }
    }
    
    
}
</style>